<template>
    <div>
        <button @click="pushfl" style="margin-left: 340px;">⭐</button>
        <van-nav-bar title="首页" />

        <!-- 搜索 -->
        <searchlist></searchlist>
        <swipe :images="swiperdata"></swipe>
        <!-- 导航 -->
        <div style="display: flex;">
            <div v-for="item in navdata">
                <img :src="item.image_src" alt="" style="width: 100%;">
            </div>
        </div>
        <!-- 楼层 -->
        <div v-for="item in floor">
            <img :src="item.floor_title.image_src" alt="" style="width: 100%;">
            <div v-for="item in item.product_list">
                <img :src="item.image_src" alt="" class="img">
            </div>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    offset="20"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</van-pull-refresh>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { swiperApi, navApi, floorApi } from '../../request/api'
import searchlist from '../../components/searchlist.vue'
import swipe from '../../components/swipe.vue'
//引入路由
import { useRouter } from 'vue-router'
const router = new useRouter()
//引入消息提示
import { showToast } from 'vant';
//轮播图
const swiperdata = ref([])
swiperApi().then(res => {
    swiperdata.value = res.data.message
})
//导航
const navdata = ref([])
navApi().then(res => {
    navdata.value = res.data.message
})
//楼层
const floor = ref([])
floorApi().then(res => {
    floor.value = res.data.message
})
const pushfl = () => {
    router.push('/home/classify')
}
const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);

    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 20) {
          finished.value = true;
          showToast('没有更多数据了')
          return
        }
      }, 1000);
    };

    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };

</script>

<style lang="scss" scoped>
.img {
    float: left;
    width: 120px;
    height: 120px;
    margin-left: 4px;
}
</style>